@import '~/common/style/index.scss';
$header-prefix-cls: #{$cui-prefix}-header;

.#{$header-prefix-cls} {
    height: 60px;
    display: flex;
    align-items: center;
    padding: 0 $padding-s;
    justify-content: space-between;
    flex-shrink: 0;
    &-content{
        display: flex;
        align-items: center;
        overflow: hidden;
        flex: 1;
        &-box{
            display: flex;
            flex-direction: column;
            flex: 1;
            // margin-left: 12px;
        }
        &-text{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
            text-align: left;
            @include Title(large);
        }
        &-sub{
            text-align: left;
            color: $gray-5;
            font-size: 12px;
            font-style: normal;
            line-height: 16px;
        }

        &-avatar-wrap{
            position: relative;
            cursor: pointer;
            margin-right: 12px;
        }

        &-presence-wrap{
            border-radius: 50%;
            width: 15px;
            height: 15px;
            background-color: #fff;
            text-align: center;
            position: absolute;
            line-height: 15px;
            bottom: -2px;
            right: -5px;
        }
    }

    &-more{
        list-style: none;
        padding: 0;
        margin: 0;
        width: max-content;
        li{
            font-weight: 500;
            font-size: $font-size-base;
            line-height: 20px;
            padding: 0 $padding-s;
            height: 36px;
            line-height: 36px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        li:hover{
            background: #F1F2F3;
        }
        .cui-li-dark:hover{
            background: $gray-2;
        }
    }

    &-iconBox{
        display: flex;
    }
}

.#{$header-prefix-cls}-dark{
    color: $gray-98;
    .#{$header-prefix-cls}-content-text{
        @include Title(large, $gray-98);
    }
    // background-color: $gray-1;
}